<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<%@ taglib prefix="sec" uri="http://www.springframework.org/security/tags"%>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<style>
body {
	font-family: Arial, Helvetica, Sans-Serif;
	font-size: 12px;
	margin: 0px 20px;
}
/* menu */
#front,
#menu {
	margin: 0px;
	padding: 0px;
	list-style: none;
	color: #fff;
	line-height: 45px;
	display: inline-block;
	z-index: 1000;
}

#front a,
#menu a {
	color: #fff;
	text-decoration: none;
}

#front>li,
#menu>li {
	background: #172322 none repeat scroll 0 0;
	cursor: pointer;
	float: left;
	position: relative;
	padding: 0px 10px;
}

#front>li a,
#menu>li a:hover {
	color: #B0D730;
}

#front .logo {
	background: transparent none repeat scroll 0% 0%;
	padding: 0px;
	background-color: Transparent;
}

#front .bl {
	background-image: url(img/header/dot.gif);
	height: 45px;
}

/* sub-menus*/
#menu ul {
	padding: 0px;
	margin: 0px;
	display: block;
	display: inline;
}

#menu li ul {
	position: absolute;
	left: -30px;
	top: 0px;
	margin-top: 45px;
	width: 150px;
	line-height: 16px;
	background-color: #172322;
	color: #0395CC; /* for IE */
	display: none;
}

#menu li:hover ul {
	display: block;
}

#menu li ul li {
	display: block;
	margin: 5px 20px;
	padding: 5px 0px;
	border-top: dotted 1px #606060;
	list-style-type: none;
}

#menu li ul li:first-child {
	border-top: none;
}

#menu li ul li a {
	display: block;
	color: #0395CC;
}

#menu li ul li a:hover {
	color: #7FCDFE;
}
/* main submenu */
#menu #main {
	left: 0px;
	top: -20px;
	padding-top: 20px;
	background-color: #7cb7e3;
	color: #fff;
	z-index: 999;
}
/* search */
.searchContainer div {
	background-color: #fff;
	display: inline;
	padding: 5px;
}

.searchContainer input[type="text"] {
	border: none;
}

.searchContainer img {
	vertical-align: middle;
}
/* corners*/
#menu .corner_inset_left {
	position: absolute;
	top: 0px;
	left: -12px;
}

#menu .corner_inset_right {
	position: absolute;
	top: 0px;
	left: 150px;
}

#menu .last {
	background: transparent none repeat scroll 0% 0%;
	margin: 0px;
	padding: 0px;
	border: none;
	position: relative;
	height: 0px;
}

#menu .corner_left {
	position: absolute;
	left: 0px;
	top: 0px;
}

#menu .corner_right {
	position: absolute;
	left: 132px;
	top: 0px;
}

#menu .middle {
	position: absolute;
	left: 18px;
	height: 20px;
	width: 115px;
	top: 0px;
}
</style>
</head>
<body>
	<center>
		<div>
			
			
			<ul id="front" style="float: left; margin-left: -50px">
				<li class="logo">
					<img style="float: left;" alt="" src="img/header/menu_left.png" />
				<li class="bl">
					<input type="button" style="margin-top: 10px" value="사진 업로드" onclick="location.href='imageWrite.do'">
				</li>
			</ul>

			<ul id="menu" style="float: right; margin-right: -50px">
				<li>
					<a href="<spring:url value="/j_spring_security_logout" htmlEscape="true" />">logout</a>
				</li>
				<li>
					<sec:authentication property="principal.username" />
					<ul id="username">
						<li>
							<img class="corner_inset_left" alt="" src="img/header/corner_inset_left.png" />
							<a href="searchid.do?username=${principal.username}">프로필</a>
							<img class="corner_inset_right" alt="" src="img/header/corner_inset_right.png" />
						</li>
						<li><a href="friendsList.do">친구목록</a></li>
						<li class="last">
							<img class="corner_left" alt="" src="img/header/corner_left.png" />
							<img class="middle" alt="" src="img/header/dot.gif" />
							<img class="corner_right" alt="" src="img/header/corner_right.png" />
						</li>
					</ul>
				</li>
				<li class="searchContainer" style="float: left;">
				<form:form action ="search.do"  >
					<div>
						<input type="text" id="searchField" name="searchField" />
						<input type="image"  src="img/header/magnifier.png"   alt="Search" onClick="doSearch(this.form)"/>
					</div>
				</form:form>
					<ul id="search">
						<li>
							<img class="corner_inset_left" alt="" src="img/header/corner_inset_left.png" />
							<input id="all" type="checkbox" />All
							<img class="corner_inset_right" alt="" src="img/header/corner_inset_right.png" />
						</li>
						<li><input id="id" type="checkbox" />아이디</li>
						<li><input id="tag" type="checkbox" />테그</li>
						<li class="last" >
							<img class="corner_left" alt="" src="img/header/corner_left.png" />
							<img class="middle" alt="" src="img/header/dot.gif" />
							<img class="corner_right" alt="" src="img/header/corner_right.png" />
						</li>
					</ul>
				</li>
			<img alt="" src="img/header/menu_right.png" />
		</ul>
	</div>
	</center>
</body>
</html>